<template>
  <div>
    <nav-bar class="top-title">
      <div class="top-title-left" slot="left" @click="backClick">
        <span style="font-size: 30px">&lt;</span>
      </div>
      <div class="top-title-center" slot="center">
        <div
          @click="titleClick(index)"
          class="title"
          v-for="(item, index) in title"
          :key="index"
          :class="{ active: currentIndex === index }"
        >
          {{ item }}
        </div>
      </div>
    </nav-bar>
  </div>
</template>

<script>
import NavBar from "../../../components/common/navigationbar/NavBar.vue";
export default {
  components: { NavBar },
  props: {
    scroll: {
      type: Object,
      default() {
        return {};
      },
    },
    scrollList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      title: ["商品", "参数", "评论", "推荐"],
      currentIndex: 0,
    };
  },
  mounted() {
    setTimeout(() => {
      this.scroll.scroll.on("scroll", (position) => {
        let y = -position.y;
        if (y < this.scrollList[1]) this.currentIndex = 0;
        else if (y < this.scrollList[2]) this.currentIndex = 1;
        else if (y < this.scrollList[3]) this.currentIndex = 2;
        else this.currentIndex = 3;
      });
    }, 1000);
  },
  methods: {
    titleClick(index) {
      this.currentIndex = index;
      this.scroll.scroll.scrollTo(0, -this.scrollList[index], 500);
    },
    backClick() {
      this.$router.back();
    },
  },
};
</script>

<style scoped>
.top-title-left {
  text-align: center;
  color: rgba(0, 0, 0, 0.8);
}
.top-title {
  border-bottom: 3px solid #eee;
}

.active {
  color: red;
}

.top-title-center {
  display: flex;
  font-size: 16px;
}

.title {
  flex: 1;
}
</style>